<template>
  <!-- 体测成绩/技能成绩----------------------------------------------------------- -->
  <div>
    <div class="container-homework">
      <!-- 蒙层 -->
      <div class="add_meng" v-show="downMeng">
        <div class="add_box">
          <p>请选择您负责的班级</p>
          <div class="add_search">
            <el-form
              :inline="true"
              :model="formScreen"
              class="demo-form-inline"
            >
              <el-form-item>
                <el-select
                  v-model="formScreen.gradeId"
                  clearable
                  placeholder="选择年级"
                  @change="changeGrade"
                >
                  <el-option
                    v-for="item in gradeIds"
                    :key="item.gradeId"
                    :label="item.gradeName"
                    :value="item.gradeId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formScreen.classId"
                  clearable
                  placeholder="选择班级"
                >
                  <el-option
                    v-for="item in downTemplateClass"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formScreen.sex"
                  clearable
                  placeholder="性别"
                >
                  <el-option
                    v-for="item in sexs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="add_buttons">
            <p @click="downColse_meng()">取消</p>
            <p @click="downTemplateExcel">下载</p>
          </div>
          <div class="close_box" @click="downColse_meng()">
            <img src="../../assets/imgs/icon_xtgb@2x.png" />
          </div>
        </div>
      </div>

      <!-- 固定图标 -->
      <div class="add_icon" @click="open_meng()">
        <img src="../../../static/img/icon_hdglfbhd@2x.png" />
      </div>
      <!-- 蒙层 -->
      <div class="add_meng" v-show="show_meng">
        <div class="add_box">
          <!-- 头部切换 -->
          <div class="add_nav">
            <div>
              <p
                :class="isTiceActive == true ? 'add_active' : ''"
                @click="ticeActive"
              >
                体测成绩
              </p>
              <p
                :class="isJinengActive == true ? 'add_active' : ''"
                @click="jinengActive"
              >
                课程成绩
              </p>
            </div>
            <div @click="close_meng()">
              <img src="../../assets/imgs/icon_xtgb@2x.png" />
            </div>
          </div>
          <!-- 横线 -->
          <div class="add_heng"></div>

          <!-- 底部按钮 -->
          <div class="add_button">
            <el-upload
              ref="upExcel"
              class="avatar-uploader"
              :http-request="uploadFile"
              :show-file-list="false"
              :auto-upload="true"
              :on-change="handleChange"
              name="file"
              action=""
            >
              <img class="excelImg" src="../../assets/imgs/up_exel.png" />
            </el-upload>
            <img
              class="imImg"
              @click="picture"
              src="../../assets/imgs/up_picture.png"
            />
          </div>
        </div>
      </div>
      <!-- 筛选搜索 -->
      <div class="screen">
        <div class="tworow">
          <div class="twoleft">
            <!-- 筛选年级 班级 -->

            <el-select
              v-model="search.gradeId"
              clearable
              placeholder="选择年级"
              @change="changeGrade"
            >
              <el-option
                v-for="item in gradeIds"
                :key="item.gradeId"
                :label="item.gradeName"
                :value="item.gradeId"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="search.classId"
              clearable
              placeholder="选择班级"
            >
              <el-option
                v-for="item in downTemplateClass"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              >
              </el-option>
            </el-select>

            <!-- 性别 -->
            <el-select v-model="search.sex" clearable placeholder="性别">
              <el-option
                v-for="item in sexs"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-button @click="getUpResults">搜索</el-button>
          </div>
          <div class="tworight">
            <el-button @click="dowmAchExcel">下载模板</el-button>
            <el-button @click="dowmAch">下载成绩</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <el-divider></el-divider>
      <div class="conInfo">
        <p>
          {{this.$route.query.name}}<span
            >ID:{{ this.$route.query.id }}</span
          >
        </p>
      </div>
      <div class="conHeader">
        <div>
          当前结果：<span>总计 {{ total }} 条记录</span>
        </div>
        <el-select
          v-model="search.custom"
          class="zidingyi"
          placeholder="自定义显示列"
        >
          <!-- <el-option label="男" value="0"></el-option>
        <el-option label="女" value="1"></el-option> -->
        </el-select>
      </div>
      <div class="conList">
        <!-- <div class="listLeft">
          <el-tree
            :data="data"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div> -->
        <div class="listRight">
          <el-table :data="tableData" v-loading="loading">
            <el-table-column
              v-for="(item, index) in headerList"
              :prop="item.projectName"
              :key="index"
              :label="item.projectName"
              width="120"
              :fixed="item.fixed"
            >
            </el-table-column>
            <el-table-column
              prop="operation"
              fixed="right"
              width="120"
              label="操作"
            >
              <template slot-scope="scope">
                <!-- <el-button
                type="primary"
                @click="toEdit(scope.row.id)"
              >操作</el-button> -->
                <el-select
                  v-model="operVal"
                  @change="change(scope.row.id)"
                  placeholder="操作"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="page"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <!-- <el-form ref="form" :model="form" label-width="0.7813rem"> -->
        <!-- 
          <el-form-item label="50米跑(秒)">
            <el-input v-model="form.speed"></el-input>
          </el-form-item>
          <el-form-item label="坐位体前屈(cm)">
            <el-input v-model="form.zuowei"></el-input>
          </el-form-item>
          <el-form-item label="立定跳远(cm)">
            <el-input v-model="form.zuowei"></el-input>
          </el-form-item>
          <el-form-item label="引体向上(个)">
            <el-input v-model="form.zuowei"></el-input>
          </el-form-item>
          <el-form-item label="仰卧起坐(个/min)">
            <el-input v-model="form.zuowei"></el-input>
          </el-form-item>
          <el-form-item label="1000米跑(秒)">
            <el-input v-model="form.zuowei"></el-input>
          </el-form-item> -->
        <!-- </el-form> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getClsTree, upResults, dowmExcel, dowmAchievement } from "@/api/index.js";
export default {
  name: "homework-sup",
  data() {
    return {
      search: {
        // date: '', // 选择日期
        gradeId: '',
        classId: '',
        type: 1, // 选择体测/技能表
        sex: '', // 选择性别
        custom: "", // 自定义
      },

      isTiceActive: true,
      isJinengActive: false,
      show_meng: false,
      downMeng: false,
      // 修改弹窗
      dialogVisible: false,
      loading: true, // 列表加载
      projectType: [
        {
          value: 1,
          label: "体测成绩"
        },
        {
          value: 2,
          label: "技能成绩"
        },
      ],
      sexs: [
        {
          // 性别
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      formScreen: {
        // project: '',
        gradeId: null,  //下载的年级id
        sex: null, //
        classId: null  //下载的班级id
      },
      gradeIds: [],
      downTemplateClass: [],

      // -----------------------------------年级-----------------------------
      data: [], // 年级树
      defaultProps: {
        children: "classInfoList",
        label: "className",
      },
      isGradeName: '',
      // ---------------------------------------------------------------------
      // 总条数
      total: 1000,
      // 列表数据
      tableData: [

      ],
      headerList: [

      ],
      // 总条数 -------------------------
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 1,
      offset: 0, // ---------------------
      file: "",
      options: [
        {
          value: "1",
          label: "修改",
        },
        {
          value: "2",
          label: "报告",
        },
      ],
      // operVal
      operVal: "",
      // form: {

      // },
    };
  },
  created() {
    // this.search.type = this.projectType.value
    this.getUpResults();
    this.getClassTree();
  },
  methods: {
    isType(e) {
      console.log('eeeee', e);
    },
    downColse_meng() {
      this.downMeng = false;
    },
    downOpen_meng() {
      this.downMeng = true;
    },
    close_meng() {
      this.show_meng = false;
    },
    open_meng() {
      this.show_meng = true;
    },
    ticeActive() {
      this.isTiceActive = true;
      this.isJinengActive = false;
    },
    jinengActive() {
      this.isTiceActive = false;
      this.isJinengActive = true;
    },
    change(userId) {
      if (this.operVal === "2") {
        console.log('userId', userId);
        this.$router.push({ path: `/healthy`, query: { examId: this.$route.query.id, userId: userId } });
        this.operVal = "";
      } else {
        this.dialogVisible = false;
        this.operVal = "";
      }
    },
    // 年级、班级树----------------------------------
    async getClassTree() {
      const data = {
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode
      }
      const res = await getClsTree(data);
      console.log("年级树", res);
      var arr = res.data.data;
      if (res.data.errorCode === "0") {
        for (const i in arr) {
          arr[i].className = arr[i].gradeName;
        }
        this.data = arr;
        this.gradeIds = arr
      }
      console.log("年级树+", arr);
    },
    // 下载成绩--------------------------------------
    // 选择年级
    changeGrade(isGradeId) {
      console.log('选择年级', isGradeId)
      var arr = this.gradeIds
      this.formScreen.classId = null
      for (const i in arr) {
        if (arr[i].gradeId == isGradeId) {
          this.downTemplateClass = arr[i].classInfoList
        }
      }
    },
    async dowmAch() {

      var isGradeId = this.search.gradeId;
      var isclassid = this.search.classId;
      var issex = this.search.sex;
      if (isGradeId == null || isGradeId == '') {
        this.$message({
          message: '请先选择匹配项',
          type: 'warning'
        });
        return
      }

      const data = {
        type: this.$route.query.type,
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode,
        termId: this.$route.query.id,
        gradeId: isGradeId, //年级id
        classId: isclassid, //班级id
        sex: issex
      }
      const res = await dowmAchievement(data)
      console.log('dowmAchievement', res);
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      })
      let url = window.URL.createObjectURL(blob)
      let a = document.createElement('a')
      a.href = url
      // this.search.type==1?'体测':'技能'
      var typeName = ''
      if (this.search.type == 1) {
        typeName = '体测'
      } else if (this.search.type == 2) {
        typeName = '技能'
      }
      a.download = `${this.$route.query.name}${typeName}成绩.xlsx`
      a.click()
      window.URL.revokeObjectURL(a.href)
    },
    // ---------------------------------------------
    // 下载成绩模板
    dowmAchExcel() {
      this.downMeng = true;
    },
    async downTemplateExcel() {
      var isGradeId = this.formScreen.gradeId;
      var isclassid = this.formScreen.classId;
      var issex = this.formScreen.sex;
      if (isGradeId == null || isGradeId == '') {
        this.$message({
          message: '请先选择匹配项',
          type: 'warning'
        });
        return
      }

      const data = {
        type: this.search.type,
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode,
        termId: this.$route.query.id,
        gradeId: isGradeId, //年级id
        sex: issex,
        classId: isclassid  // 班级id
      }
      const res = await dowmExcel(data)
      console.log('dowmExcel', res);
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      })
      let url = window.URL.createObjectURL(blob)
      let a = document.createElement('a')
      a.href = url
      a.download = '成绩模板.xlsx'
      a.click()
      window.URL.revokeObjectURL(a.href)
    },
    // 上传成绩首页表
    async getUpResults() {
      var data = {
        type: this.$route.query.type,
        sex: this.search.sex,
        orgId: JSON.parse(sessionStorage.getItem("userMsg")).orgCode,
        gradeId: this.search.gradeId,  //年纪id
        classId: this.search.classId,  //班级id
        termId: this.$route.query.id,
        pageNo: this.page,
        pageSize: this.pageSize,
      };
      const res = await upResults(data);
      console.log("上传成绩首页表", res);
      var arr = res.data.data.headerList;  //表头数组
      var brr = res.data.data.pageInfo.list;   //列表数组
      var crr = [] //空数组装

      console.log('头部数组', arr);
      console.log('身体数组', brr);


      for (var i in arr) {
        if (i == 0) {
          arr[i].fixed = 'left'
        }
      }

      for (var n in brr) {
        let obj = {
          姓名: '', 性别: ''
        }
        obj.姓名 = brr[n].userName;
        if (brr[n].sex == 1) {
          brr[n].sex = '男'
        } else if (brr[n].sex == 2) {
          brr[n].sex = '女'
        }
        obj.性别 = brr[n].sex;
        console.log('obj2', obj)
        for (var j in brr[n].achievementList) {
          var e = brr[n].achievementList[j].projectName;
          var o = brr[n].achievementList[j].achievement;
          obj[e] = o;
          obj.id = brr[n].userId

        }
        crr.push(obj);
      }

      console.log('获得的数组', crr)
      this.tableData = crr;
      this.headerList = res.data.data.headerList;
      this.total = res.data.data.pageInfo.total
      this.loading = false
    },
    // 选择年级树的年级
    handleNodeClick(data) {
      this.search.gradeId = data.gradeId;
      this.isGradeName = data.className
      console.log("选中的年级", this.search.gradeId, this.isGradeName);
      this.getUpResults()
    },
    // 分页函数
    changePage(newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.offset = this.pageSize * (newPage - 1);
      this.loading = true
      this.getUpResults()
    },
    // 上传成绩
    handleChange(file, fileList) {
      // this.file = file;
      // console.log('file',this.file);

      // formData.append("theme", this.theme);
      // formData.append("file", this.file);

    },
    uploadFile(file) {
      console.log('file1111111111', file);
      let formData = new FormData();
      formData.append("uploadFile", file.file);
      var isAchType = ''
      if (this.isTiceActive) {
        isAchType = 1
      } else if (this.isJinengActive) {
        isAchType = 2
      }
      var orgId = JSON.parse(sessionStorage.getItem('userMsg')).orgCode
      var termId = this.$route.query.id
      this.$http({
        url: this.$http.wkbbBaseUrl(`achievement/uploadAchievementExcel?orgId=${orgId}&termId=${termId}&type=${isAchType}`),
        method: 'POST',
        headers: {
          "Content-Type": "multipart/form-data"
        },
        // data: {
        //   // orgId: orgId,
        //   // termId: termId,
        //   // type: isAchType,
        //   uploadFile: formData
        // }
        data: formData
      }).then((res) => {
        console.log('上传', res);
        if (res.data.errorCode == '0') {
          this.show_meng = false
          this.$message({
            message: '上传成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '上传失败',
            type: 'error'
          });
        }
      });
    },
    picture() {
      this.$message({
        message: '此功能正处开发阶段,敬请期待！',
        type: 'warning'
      });
    },
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？此操作将不保存修改信息!")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    // 保存修改
    save() {
      this.dialogVisible = false;
    }
  },
  // watch: {
  //   $route(val) {
  //     console.log(val, "333333333333333");
  //     this.getUpResults()
  //   },
  // }
}
</script>

<style lang="scss" scoped>
/deep/.el-table th {
  font-size: 0.1rem;
}
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  margin-bottom: 0.5208rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选部分
  .screen {
    line-height: 0.2188rem;
    .onerow {
      display: flex;
      /deep/.el-input--suffix .el-input__inner,
      .el-input--medium {
        background-color: #f7fbfc;
        height: 0.2188rem;
        width: 1.25rem;
        margin-right: 0.1927rem;
        border-radius: 0.0521rem;
      }
    }
    .tworow {
      display: flex;
      justify-content: space-between;
      .twoleft {
        /deep/.el-input__icon {
          line-height: 0.2188rem;
        }
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin: 0 0.1042rem 0 0;
        }
        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
      .tworight {
        .el-button:nth-child(1) {
          background-color: #0fdd8d;
          color: #fff;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-button:nth-child(2) {
          background-color: #24aaff;
          color: #fff;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
      }
      .el-button {
        padding: 0;
      }
    }
  }
  .conInfo {
    p {
      font-size: 0.0885rem;
      font-weight: 600;
      color: #888888;
      span {
        margin-left: 0.0833rem;
        font-size: 0.0625rem;
        color: #aaaab2;
        font-weight: 400;
      }
    }
  }
  .conHeader {
    display: flex;
    justify-content: space-between;
    line-height: 0.1875rem;
    font-size: 0.0729rem;
    margin-bottom: 0.0781rem;
    div {
      color: #525252;
      span {
        color: #888888;
      }
    }
    /deep/.el-select > .el-input--medium > .el-input__inner,
    /deep/.el-input .el-input__count .el-input__count-inner {
      background-color: #f7fbfc;
      line-height: 0.2188rem;
      width: 0.7396rem;
      border-radius: 0.0521rem;
    }
  }
  // 内容列表
  .conList {
    display: flex;
    .listLeft {
      width: 12%;
      border-top-right-radius: 0.1042rem;
      border-right: 1px solid #cfd3d4;
      // 年级树
      .el-tree {
        // /deep/.el-tree-node .el-tree-node__content .el-icon-caret-right {
        // display: none;
        // }
        /deep/.el-tree-node .el-tree-node__content {
          height: 40px;
        }
        /deep/.el-tree-node .el-tree-node__label {
          font-size: 14px;
        }
        /deep/.el-tree-node .is-current {
          background-color: #f0fffd;
          border-left: 3px solid #0fdd8d;
          color: #0fdd8d;
        }
        /deep/.el-tree-node-children:hover {
          background-color: #f0fffd;
        }
      }
      /deep/ .el-tree-node {
        white-space: normal;
      }
    }
    .listRight {
      width: 100%;

      .el-table {
        /deep/.el-table__header-wrapper {
          overflow: hidden;
          border-radius: 0.0938rem;
        }
        /deep/.el-table__header-wrapper {
          background-color: #add3d1;
        }
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          width: 0.4479rem;
          height: 0.1875rem;
          background: #f8f8f8;
          border-radius: 0.0938rem;
          padding: 0 0.1042rem 0 0.1302rem;
          color: #888888;
        }
        /deep/.el-input__suffix {
          display: none;
        }
        /*修改滚动条样式*/ 
        /deep/.el-table__fixed { // 左固定列
          height: auto !important;
          bottom: 0.0781rem;
        }
        /deep/.el-table__fixed-right { // 右固定列
          height: auto !important;
          bottom: 0.0781rem;
        }
        /deep/::-webkit-scrollbar {
          width: 2.6042rem;
          height: 0.0781rem;
          /**/
        }
        ::-webkit-scrollbar-track {
          background: rgb(239, 239, 239);
          border-radius: 2px;
        }
        ::-webkit-scrollbar-thumb {
          background: #d6d6d6;
          border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: rgb(197, 197, 197);
        }
        ::-webkit-scrollbar-corner {
          background: #179a16;
        }
      }
    }
  }
  /deep/.el-dialog {
    border-radius: 0.0781rem;
    /deep/.el-dialog__header,
    /deep/.el-dialog__body,
    /deep/.el-dialog__footer {
      border-radius: 0.0781rem;
    }
  }
}
.add_icon {
  position: fixed;
  z-index: 100;
  width: 0.6rem;
  height: 0.6rem;
  bottom: 2%;
  right: 2%;
  img {
    width: 100%;
    height: 100%;
  }
}
.add_meng {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  .add_box {
    width: 36%;
    height: 2rem;
    background-color: white;
    border-radius: 0.07rem;
    padding: 0.1rem;
  }
}
.add_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;

  > div:first-child {
    display: flex;
    align-items: center;
    p {
      font-size: 0.0938rem;
      color: #888888;
      margin-right: 14.9952px;
      padding-bottom: 0.1rem;
      border-bottom: 0.0156rem solid #fff;
      &:hover {
        cursor: pointer;
      }
    }
  }
  > div:nth-of-type(2) {
    padding-bottom: 0.1rem;
    img {
      width: 0.14rem;
      height: 0.14rem;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.add_heng {
  width: 100%;
  height: 0.0052rem;
  background-color: #0fdd8d;
  opacity: 0.3;
  position: relative;
  top: -0.0104rem;
}
.add_active {
  color: #0fdd8d !important;
  border-bottom: 0.0156rem solid #0fdd8d !important;
}
.add_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15%;
  .el-upload:first-child {
    .excelImg {
      width: 0.8073rem;
      height: 0.93rem;
    }
  }
  .imImg {
    width: 1.2rem;
    margin-top: 0.2rem;
    &:hover {
      cursor: pointer;
    }
  }
  // .el-upload:last-child {
  //   .imImg {
  //     width: 1.2rem;
  //     margin-top: 0.2rem;
  //   }
  // }
}

.add_meng {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 1111;
  display: flex;
  align-items: center;
  justify-content: center;
  .add_box {
    width: 36%;

    background-color: white;
    border-radius: 0.07rem;
    padding: 0.2rem;
    position: relative;
    > p:first-child {
      text-align: center;
      font-size: 0.1354rem;
      color: #525252;
    }
    .close_box {
      position: absolute;
      right: 0.1042rem;
      top: 0.1042rem;
      img {
        width: 0.14rem;
        height: 0.14rem;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .add_search {
      margin: 0.2605rem 0;

      // 筛选搜索
      .el-form {
        height: 0.2188rem;
        display: flex;
        justify-content: center;

        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        /deep/.el-input--medium:nth-child(2) .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 1.0417rem;
          border-radius: 0.0521rem;
        }
      }
    }
    .add_buttons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 100px;
      > p {
        padding: 0.0521rem 0.1563rem;
        font-size: 0.1042rem;
        color: #525252;
        border-radius: 0.0521rem;
        &:hover {
          cursor: pointer;
        }
      }
      > p:first-child {
        border: 0.0052rem solid #666;
        margin-right: 0.2604rem;
      }
      > p:nth-of-type(2) {
        border: 0.0052rem solid #0fdd8d;
        background-color: #0fdd8d;
        color: #fff;
      }
    }
  }
}
</style>
